<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>天气案例_监视属性</title>
		<script src="../../JS/vue.js"></script>
	</head>
	<body>
		<!-- 
             深度监视：
			    (1).Vue中的Watch默认不监视对象内部值的改变(一层)
				(2).配置deep:true可以监视对象内部值改变(多层)
			 备注:
			    (1).Vue自身可以监测对象内部值得改变，但Vue提供的Watch默认不可以；
				(2).使用watch是根据数据的具体结构,决定是否采用深度监视	
 

		 -->
		<div id="root">
			<!-- <h2>今天心情很不好{{isHot ? 炎热 : 凉爽}}</h2> -->
			<h2>今天心情很{{info}}</h2>
			<button @click="changeWeatcher">切换天气</button>
			<h3>a的值是{{numbers.a}}</h3>
			<button @click="numbers.a++">a的计算</button>
			<h3>b的值是{{numbers.b}}</h3>
			<button @click="numbers.b++">b的计算</button>
		</div>
		<script>
			Vue.config.productionTip = false //阻止 vue 在启动时产生提示
			const vm = new Vue({
				el: '#root',
				data: {
					isHot: true,
					numbers: {
						a: 1,
						b: 3
					}
				},
				methods: {
					changeWeatcher() {
						this.isHot = !this.isHot
					}
				},
				computed: {
					info() {
						return this.isHot ? '糟糕' : '高兴'
					}
				},
				watch: {
					// isHot: {
					// 	immediate: true, //初始化是让handler调用一下
					// 	// handeler什么时候调用？当isHot发生变化的时候
					// 	handler(newValue, oldValue) {
					// 		console.log('isHot被修改', newValue, oldValue)
					// 	}
					// }
					// 简写监事属性
					'numbers.b'(newValue, oldValue) {
						console.log('a被修改了')
					}
				}
			})

			/* vm.$watch('isHot', {
			 	immediate: true,
			 	deep: true,
			 	handler(newValue, oldValue) {
			 		console.log(newValue, oldValue, this)
			 	}
			 })*/
			//  简写
			/* vm.$watch('isHot', function (newValue, oldValue) {
				console.log('isHot被修改了' + newValue, oldValue, this)
			}) */
		</script>
	</body>
</html>
